<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --ratio: 1;
      }
      .title {
        font-size: calc(16px * var(--ratio));
        color: red;
        font-weight: bold;
      }
      .content {
        font-size: calc(16px * var(--ratio));
        width: calc(100% * var(--ratio));
        height: calc(80px * var(--ratio));
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="title">标题</div>
      <div class="content">内容</div>
    </div>
    <script>
      const DESGN_WIDTH = 1920;

      function setScaleRatio() {
        const width = window.innerWidth;
        const scaleRatio = Math.min(2, width / DESGN_WIDTH);
        console.log(`scaleRatio`, scaleRatio);
        document.documentElement.style.setProperty("--ratio", scaleRatio);
        return scaleRatio;
      }
      setScaleRatio();
      window.addEventListener("resize", () => {
        setScaleRatio();
      });
    </script>
  </body>
</html>
